<template>
  <div>
    <el-container>
      <el-header class="el-header1">
        <el-breadcrumb separator-class="el-icon-arrow-right" style="font-size: 16px">
          <el-breadcrumb-item :to="{ path: '/' }">
            <i class="el-icon-s-promotion"></i> 首页
          </el-breadcrumb-item>
          <el-breadcrumb-item>操作日志</el-breadcrumb-item>
        </el-breadcrumb>
      </el-header>
      <el-main>
        <el-form :inline="true" :model="operateQuery" ref="userQuery" class="demo-form-inline"
                 v-show="showEachState">
          <el-form-item label="用户名称">
            <el-input v-model="operateQuery.username" placeholder="用户名称"></el-input>
          </el-form-item>
          <el-form-item label="用户状态">
            <el-select v-model="operateQuery.status" placeholder="请选择">
              <el-option
                  v-for="item in options"
                  :key="item.value"
                  :label="item.label"
                  :value="item.value">
              </el-option>
            </el-select>
          </el-form-item>
          <el-form-item style="margin-left: 1%">
            <el-button type="primary" @click="operateQueryLogList">查询</el-button>
            <el-button @click="">重置</el-button>
          </el-form-item>
        </el-form>
        <el-row style="margin-bottom: 10px">
          <el-button type="danger" plain size="mini">导出数据</el-button>
          <el-button icon="el-icon-refresh" circle size="mini" style="float: right"
                     @click=""></el-button>
          <el-button icon="el-icon-search" circle size="mini" style="float: right"
                     @click="showEach"></el-button>
        </el-row>
        <el-table
            :data="tableData"
            style="width: 100%">
          <el-table-column
              prop="id"
              label="操作编号"
              width="120"
              align="center">
          </el-table-column>
          <el-table-column
              prop="username"
              label="用户名"
              width="130"
              align="center">
          </el-table-column>
          <el-table-column
              prop="status"
              label="状态"
              width="120"
              align="center">
            <template slot-scope="scope">
              <el-button type="success" v-if="scope.row.status==1">成功</el-button>
              <el-button type="danger" v-else>失败</el-button>
            </template>
          </el-table-column>
          <el-table-column
              prop="ip"
              label="登陆IP"
              align="center">
          </el-table-column>
          <el-table-column
              prop="operation"
              label="操作方法"
              width="180"
              align="center">
          </el-table-column>
          <el-table-column
              prop="createTime"
              label="操作时间"
              align="center">
          </el-table-column>
          <el-table-column
              prop="time"
              label="消耗时间"
              align="center">
          </el-table-column>
          <el-table-column
              label="删除"
              width="100"
              align="center">
            <template slot-scope="scope">
              <el-popconfirm
                  title="确定删除用户吗？" @confirm="handleDelete(scope.row.id)">
                <el-button slot="reference" type="danger" icon="el-icon-delete" size="mini"
                           circle></el-button>
              </el-popconfirm>
            </template>
          </el-table-column>
        </el-table>
      </el-main>
    </el-container>


  </div>
</template>
<script>
import axios from "axios";

export default {
  data() {
    return {
      showEachState: true,
      tableData: [],
      operateQuery: {
        username: '',
        status: null
      },

      options: [{
        value: '0',
        label: '失败'
      }, {
        value: '1',
        label: '成功'
      }],
      dialogFormVisible: false,
      formLabelWidth: '120px',
      updateUserFromVisible: false,
      redio: '0',
    }
  },
  methods: {
    showEach() {
      if (this.showEachState == true) {
        this.showEachState = false;
      } else {
        this.showEachState = true;
      }
    },
    operateQueryLogList() {
      axios.get("http://localhost:10090/draw/user-log/findAll").then(response => {
        this.tableData = response.data
      })
    },

  },
  created() {
    this.operateQueryLogList();

  }
}
</script>
<style>

.el-header1 {
  color: #333;
  text-align: center;
  height: 30px !important;
}

.footer {
  text-align: center;
  height: 30px !important;
}

.demo-table-expand {
  font-size: 0;
}

.demo-table-expand label {
  width: 80px;
  color: #99a9bf;
}

.demo-table-expand {
  margin-right: 0;
  margin-bottom: 0;
  width: 80%;
}
</style>